<!-- 个人中心 -->
<template>
	<view class="contain" style="">
		<view class="order_box">
			<view class="order_item1">
				<view class="name1">团队订单数量（单）</view>
				<view class="money1">{{ordersum}}</view>
				<view class="order_br"></view>
				<view style="display: flex;justify-content: space-between;">
					<view>
						<view class="name2">一级订单</view>
						<view class="money2">{{teamdata.one_order_sum?teamdata.one_order_sum:0}}</view>
					</view>
					<view>
						<view class="name2">二级订单</view>
						<view class="money2">{{teamdata.two_order_sum?teamdata.two_order_sum:0}}</view>
					</view>
				</view>
			</view>
			<view class="order_item2">
				<view class="name1">团队订单金额（元）</view>
				<view class="money1">{{moneysum}}</view>
				<view class="order_br"></view>
				<view style="display: flex;justify-content: space-between;">
					<view>
						<view class="name2">一级订单</view>
						<view class="money2">{{teamdata.one_order_money?teamdata.one_order_money:0}}</view>
					</view>
					<view>
						<view class="name2">二级订单</view>
						<view class="money2">{{teamdata.two_order_money?teamdata.two_order_money:0}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 	<view class="order_box2">
			<view class="order_item3">
				<view class="name1">直推分销订单数量（单）</view>
				<view class="money1">0</view>
			</view>
			<view class="order_item4">
				<view class="name1">直推分销订单金额（单）</view>
				<view class="money1">0</view>
			</view>
		</view> -->
		<view class="order_box3">
			<view class="order-xuan">
				<view class="uni-list-cell-db">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
				<view class="jiantou"></view>
			</view>
			<view style="display: flex;font-size: 28rpx;font-weight: 400;">
				<view>全部</view>
				<view>￥{{sum_money}}</view>
			</view>
		</view>
		<view class="title_box">
			<view @click="clickItem(item)" v-for="(item, i) in titleList" :key="i">
				<view style="position: relative;display: flex;">
					<view class="dian" v-if="handleitem==item"></view>
					<view :class="item==handleitem?'yname':'noname'">{{item}}</view>
				</view>
			</view>
		</view>
		<view class="order-list" v-if="TeamList.length>0">

			<view class="order" :class="{ 'u-m-t-30': index }" v-for="(item,index) in TeamList" :key="index">
				<view class="top u-border-bottom">
					<view class="left u-tips-color">
						<text>订单编号:</text>
						<view class="store">{{ item.order_sn }}</view>
					</view>
					<!-- <view class="right">{{ res.status_text }}</view> -->
				</view>
				<view class="item">
					<view class="left">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="content">
						<view class="title u-line-1" v-text="item.goods_name"></view>

					</view>
					<view class="right">
						<view class="price">
							￥{{ item.money}}

						</view>
						<!-- <view class="number">×{{ item.nums }}</view> -->
					</view>
				</view>
			</view>

			<!-- <view v-for="(item, i) in TeamList" :key="item.id">
				<view class="list-item">
					<view style="flex: 1;">
						<image style="width: 66rpx;height: 66rpx;" :src="(item.avatar)"></image>
					</view>
					<view style="flex: 4;">
						<view style="display: flex;justify-content: space-between;">
							<view class="list-name">{{item.nickname}}</view>
							<view class="list-money">{{item.money}}</view>
						</view>
						<view class="list-bottom">
							<view>{{item.createtime?item.createtime:''}}</view>
							<view class="chengyuan">累计收益</view>
						</view>
					</view>
				</view>

			</view> -->
		</view>
		<view class="zanwubox" v-else>
			<view>
				<image style="width: 261rpx;height: 175rpx;" src="../../static/image/fenxiao21.png"></image>
			</view>
			<view class="zhanwu">暂无订单</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				handleitem: '全部',
				// titleList: [
				// 	"全部", "已计入", "已退回", "已取消"
				// ],
				titleList: [
					"全部"
				],
				TeamList: [
					// 	{
					// 	id: 0,
					// 	name: "Your Peter",
					// 	dengji: "默认等级",
					// 	time: "2022年3月30日18:20",
					// 	nums: 0,
					// 	image: require('../../static/image/fenxiao32.png'),
					// 	type:'累计收益',
					// 	money:'215.56'
					// }, {
					// 	id: 1,
					// 	name: "Your Peter",
					// 	dengji: "默认等级",
					// 	time: "2022年3月30日18:20",
					// 	nums: 0,
					// 	image: require('../../static/image/fenxiao33.png'),
					// 	type:'累计收益',
					// 	money:'215.56'
					// }
				],
				teamdata: {},
				ordersum: 0,
				moneysum: 0,
				sum_money: 0
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		mounted() {
			this.getOrderData()
		},
		methods: {
			getOrderData() {
				let that = this
				that.$api.teamList({
					is_reward: 1,
					order_time: this.date
				}).then(res => {
					console.log('res', res)
					if (res.code == 1) {
						this.teamdata = res.data
						this.TeamList = res.data.order_data
						this.sum_money = res.data.sum_money
						var ordersum = 0
						var moneysum = 0
						if (this.teamdata.one_order_sum) {
							ordersum += this.teamdata.one_order_sum
						}
						if (this.teamdata.two_order_sum) {
							ordersum += this.teamdata.two_order_sum
						}
						that.ordersum = ordersum

						if (this.teamdata.one_order_money) {
							moneysum += Number(teamdata.one_order_money)
						}
						if (this.teamdata.two_order_money) {
							moneysum += this.teamdata.two_order_money
						}
						that.moneysum = moneysum
					}
				});
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
				this.getOrderData()
			},
			clickItem(val) {
				console.log("111", val)
				this.handleitem = val
			}
		}
	};
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.contain {
		height: 100vh;
		background: #F5F5F5;
		padding-top: 28rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.order_item1 {
		background-size: 100% 100%;
		width: 336rpx;
		height: 232rpx;
		background-image: url('https://huboshizb.bigchun.com/uploads/20220912/68583ae2c45e72f175bceab28750dede.png');
		padding: 30rpx 40rpx 20rpx 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

	}

	.order_item2 {
		background-size: 100% 100%;
		width: 336rpx;
		height: 232rpx;
		background-image: url(https://huboshizb.bigchun.com/uploads/20220912/b841601868c22015113236a27c7fc511.png);
		padding: 30rpx 40rpx 20rpx 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.order_item3 {
		background-size: 100% 100%;
		// width: 336rpx;
		height: 142rpx;
		background-image: url('https://huboshizb.bigchun.com/uploads/20220912/5f1d786335d499430743d4fa455ef261.png');
		padding: 30rpx 0rpx 20rpx 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.order_item4 {
		background-size: 100% 100%;
		// width: 336rpx;
		height: 142rpx;
		background-image: url('https://huboshizb.bigchun.com/uploads/20220912/ab18e6a97007549108ad354602915739.png');
		padding: 30rpx 0rpx 20rpx 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.order_box {
		// padding-top: 28rpx;
		display: flex;
		// margin-left: 30rpx;
		// margin-right: 30rpx;
		justify-content: space-between;

	}

	.order_box2 {
		display: flex;
		justify-content: space-between;
		margin-top: 28rpx;
	}

	.order_br {
		border: 1rpx solid #FFFFFF;
		opacity: 0.38;
	}

	.order_box3 {
		display: flex;
		justify-content: space-between;
		margin-top: 50rpx;
		align-items: center;
	}

	.name1 {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}

	.money1 {
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #FFFFFF;
	}

	.name2 {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}

	.money2 {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #FFFFFF;
	}

	.zhanwu {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}

	.zanwubox {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 200rpx;
	}

	.order-list {
		// margin-left: 30rpx;
		// margin-right: 30rpx;
		// margin-top: 36rpx;
		// background: #FFFFFF;
		// border-radius: 10rpx;
		// padding-left: 30rpx;
		// padding-top: 20rpx;
		// padding-right: 30rpx;
		padding: 20px 0;
	}

	.list-item {
		display: flex;
		border-bottom: 1px solid #eeeeee;
		margin-top: 30rpx;

	}

	.list-name {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
	}

	.list-dengji {
		background-size: 100% 100%;
		width: 136rpx;
		height: 36rpx;
		background-image: url('/static/image/fenxiao20.png');
		text-align: center;
		font-size: 26rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin-left: 16rpx;
	}

	.list-bottom {
		display: flex;
		margin-top: 18rpx;
		margin-bottom: 36rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		justify-content: space-between;
	}

	.chengyuan {
		margin-left: 30rpx;
	}

	.num {
		margin-left: 10rpx;
	}

	.order-xuan {
		width: 242rpx;
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.jiantou {
		background-size: 100% 100%;
		width: 30rpx;
		height: 17rpx;
		background-image: url('/static/image/fenxiao31.png');
	}

	.title_box {
		display: flex;
		// justify-content: space-around;
		margin-top: 33rpx;
		margin-left: 10px;
	}

	.dian {
		background-size: 100% 100%;
		width: 35rpx;
		height: 35rpx;
		background-image: url('/static/image/fenxiao26.png');
		position: absolute;
		top: -5px;
		left: -7px;
	}

	.noname {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		z-index: 9;
		width: 100rpx;
	}

	.yname {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		// position: absolute;
		width: 100rpx;
		left: 20rpx;
		top: 0rpx;
		z-index: 9;
	}

	.list-money {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #F16009;
	}

	.order {
		width: 710rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 30rpx;
		font-size: 28rpx;

		.top {
			padding-bottom: 20rpx;
			margin-bottom: 10rpx;
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;
				font-size: 25rpx;

				.store {
					margin: 0 10rpx;
				}
			}

			.right {
				color: $u-type-warning-dark;
			}
		}

		.item {
			display: flex;
			padding: 20rpx 0;
			border-bottom: 1px solid #f4f6f8;
			justify-content: space-between;

			.left {
				margin-right: 20rpx;

				image {
					width: 200rpx;
					height: 150rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				flex: 1;

				.title {
					font-size: 28rpx;
					line-height: 40rpx;
					width: 320rpx;
				}

				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}
			}

			.right {
				margin-left: 10rpx;
				// padding-top: 20rpx;
				text-align: right;

				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}

				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}

		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;

			.total-price {
				font-size: 32rpx;
			}
		}

		.btn {
			line-height: 52rpx;
			width: 160rpx;
			border-radius: 26rpx;
			border: 2rpx solid $u-border-color;
			font-size: 26rpx;
			text-align: center;
			color: $u-type-info-dark;
			margin-left: 15rpx;
		}

		.shipped {
			color: $u-type-success;
			border-color: $u-type-success;
		}

		.evaluate {
			color: $u-type-warning-dark;
			border-color: $u-type-warning-dark;
		}

		.bottom {
			display: flex;
			margin-top: 40rpx;
			padding: 0 10rpx;
			justify-content: flex-end;
			align-items: center;
		}
	}
</style>